import { useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';

import loginBg from '@/assets/images/login-bg.png';
import { SvgIcon } from '@/components/icon';
import useWindowWidth from '@/hooks/event/use-window-width';
import configStore from '@/store/configStore';
import userStore, { useUserToken } from '@/store/userStore';

import LoginForm from './LoginForm';
import { LoginStateProvider } from './providers/LoginStateProvider';

const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;

function Login() {
  const { t } = useTranslation();
  const token = useUserToken();
  const { isPc } = useWindowWidth();

  useEffect(() => {
    configStore.getState().actions.clearConfig();
    userStore.getState().actions.clearUserInfoAndToken();
    //   getSystemAccountConfig().then((res) => {
    //     if (res.allowLocalAccount) {
    //       console.log('允许本地账户登录');
    //       // 允许本地账户登录
    //     } else {
    //       // 不允许本地账户登录
    //       console.log('不允许本地账户登录');
    //       window.location.href = '/openapi/v1/sso/login';
    //     }
    //   }).catch((err) => {
    //     console.log(err);
    //   });
  }, []);

  return (
    <div
      style={{ backgroundImage: `url(${loginBg})`, backgroundSize: '100% 100%' }}
      className="min-w-screen flex min-h-screen items-center justify-center overflow-hidden"
    >
      <Helmet>
        <title>天工睿核智能体</title>
        <link rel="icon" href="/favicon-eai.ico" />
      </Helmet>
      <div className="relative z-10 flex min-h-screen w-[400px] items-center justify-center p-4">
        <div className="w-full max-w-md rounded-xl border-0 bg-white p-8 shadow-sm backdrop-blur-sm">
          <div className="mb-6 text-center">
            {/* Logo/Avatar */}
            <div className="mx-auto flex h-20  w-20 items-center justify-center rounded-2xl bg-gradient-to-br">
              <div className="flex h-[70px] w-[70px] items-center justify-center rounded-lg bg-white">
                {/* <img
                  src={loginLog}
                  alt=""
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                /> */}
                <SvgIcon icon="logo" size={60} />
              </div>
            </div>

            {/* Title */}
            {/* <h1 className="text-xl font-semibold text-gray-800 mb-1 text-transparent bg-radial-gradient(at right top, #3b82f6, #ec4899) bg-clip-text"style={{ background: 'linear-gradient(90.54deg, #967BFF 17.7%, #CC5EFF 91.14%)', backgroundClip: "text", WebkitBackgroundClip: 'text', }} >天工睿核智能体</h1> */}
            <h1
              className="mb-1 text-2xl font-bold"
              style={{
                // background: 'linear-gradient(90.54deg, #967BFF 17.7%, #CC5EFF 91.14%)',
                background: 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',

                WebkitBackgroundClip: 'text',
                backgroundClip: 'text',
                color: 'transparent',
                display: 'inline-block',
                fontFamily: 'AlimamaShuHeiTi, sans-serif',
              }}
            >
              天工睿核智能体
            </h1>
            <p className="text-xs text-text-3">enterprise AI empowering platform</p>
          </div>

          <LoginStateProvider>
            <LoginForm />
          </LoginStateProvider>
        </div>
      </div>
    </div>
  );
}

export default Login;
